<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OA协同办公系统</title>
</head>
<style type="text/css">
.divuser {
	background: #EBEBEB;
	width: 650px;
	height: 380px;
	border: #CCC double 2px
}
</style>
<link type="text/css" rel="stylesheet" href="css/table.css">
<script type="text/javascript" src="js/table.js"></script>
<link rel="stylesheet" href="js/easyui/themes/default/easyui.css" />
<link rel="stylesheet" href="js/easyui/themes/icon.css" />
<script type="text/javascript" src="js/easyui/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/select.js"></script>
<script type="text/javascript">
	$(function() {
		$('#tt2')
				.tree(
						{
							checkbox : false,
							url : 'organizationTree.action',
							onBeforeExpand : function(node, param) {
								$('#tt2').tree('options').url = "organizationChildTree.action?orgId="
										+ node.id;// change the url                       

							},
							onClick : function(node) {
								$(this).tree('toggle', node.target);
								document.getElementById("userselect").style.display = "block";
								document.getElementById("userList").style.display = "none";
								getOrg(node);
							}
						});
		setTimeout(loadGroup, 200);
		var obj = document.getElementById("obj2");
		var status = $("#status").val();
		var initvalue = eval("[" + opener.getOldValue(status) + "]");
		if (initvalue != '' && initvalue != undefined) {
			addAll(obj, initvalue);
		}
	});

	function loadGroup() {
		$('#group').tree({
			checkbox : false,
			url : 'getOrgAndGroup.action',
			onBeforeExpand : function(node, param) {
				$('#group').tree('options').url = "getGroupNo.action";// change the url                       

			},
			onClick : function(node) {
				document.getElementById("userselect").style.display = "block";
				document.getElementById("userList").style.display = "none";
				getGroup(node.id);
			}
		});
	}
	function getGroup(id) {
		var param = {
			"organizationId" : id
		};
		$.post("getGroupUser.action", param, function(data) {
			var list = data.userList;
			var obj1 = document.getElementById("obj1");
			clear(obj1);
			for (var i = 0; i < list.length; i++) {
				addItem(obj1, list[i].id, list[i].name);
			}
		}, "json");

	}

	function getOrg(node) {
		var param = {
			"organizationId" : node.id
		};
		$.post("getUserOrg.action", param, function(data) {
			var list = data.userList;
			var obj1 = document.getElementById("obj1");
			clear(obj1);
			addItem(obj1, node.id + ':org', node.text);
			for (var i = 0; i < list.length; i++) {
				addItem(obj1, list[i].id, list[i].name);
			}
		}, "json");

	}

	function addUser() {
		var status = $("#status").val();
		var obj = document.getElementById("obj2");
		var array = getSelectArray(obj);
		if (status != '' && status != 'null') {
			opener.setValue(array, status);
		} else {
			opener.setValue(array);
		}
		window.close();
	}
	var list;
	function searchList() {
		var name = $("#name").val();
		if ($.trim(name) == '' || $.trim(name) == 'null') {
			$("#error").html("请输入关键字！");
			return;
		} else {
			document.getElementById("userList").style.display = "block";
			document.getElementById("userselect").style.display = "none";
			$("#tabllist").find("#row").remove();
			$("#error").html("");
			var param = {
				"name" : name
			};
			$
					.post(
							"searchJsonUser.action",
							param,
							function(data) {
								list = data.userList;
								for (var i = 0; i < list.length; i++) {
									$("#tabllist")
											.append(
													"<tr id=\"row\" onmouseover=\"overStyle(this)\" onmouseout=\"outStyle(this)\"><td align=\"center\"><input type=\"checkbox\" name=\"ids\" value=\""+list[i].id+"\"></td><td>"
															+ list[i].account
															+ "</td><td>"
															+ list[i].name
															+ "</td><td>"
															+ list[i].phone
															+ "</td><td>"
															+ list[i].orgName
															+ "</td></tr>");
								}
							}, "json");
		}
	}

	document.onkeydown = function(event) {
		var event = event ? event : window.event;
		if (event.keyCode == 13) {
			searchList();
		}
	}
	function addTableUser() {
		var array;
		var obj = document.getElementById("obj2");
		var status = $("#status").val();
		var checks = $("#tabllist").find("input[name='ids']");
		for (var i = 0; i < checks.length; i++) {
			if (checks[i].checked) {
				for (var j = 0; j < list.length; j++) {
					if (checks[i].value == list[j].id) {
						addItem(obj, list[j].id, list[i].name);
						break;
					}
				}
			}
		}
		array = getSelectArray(obj);
		if (status != '' && status != 'null') {
			opener.setValue(array, status);
		} else {
			opener.setValue(array);
		}
		window.close();
	}
</script>

<body>
	<input id="status" type="hidden" value="${status}">
	<div class="divuser">
		<h1
			style="background: url(image/usebg.jpg); height: 30px; margin: 0; text-align: center; line-height: 30px; font-size: 16px">
			选择人员</h1>
		<div align="left" style="margin-left: 30px">
			<span style="width: 250px;">姓名或账号：<input type="text" id="name"
				name="name"><input type="button" class="button_02"
				onclick="searchList()" value="搜索"></span><font size="2" color="red"
				id="error"></font>
		</div>
		<div id="tree-div"
			style="float: left; width: 180px; height: 320px; border: #666 double 1px; overflow-y: auto; overflow-x: auto; word-break: break-all;">
			<ul id="tt2">

			</ul>
			<ul id="group">

			</ul>
		</div>
		<div
			style="width: 400px; height: 320px; border: #666 double 1px; float: left; overflow-y: auto;">
			<span id="userList" style="display: none;">
				<table id="tabllist" class="righ_list" frame="box" cellspacing="1"
					cellpadding="0" width="100%" border="0">
					<tr class="reigh_list2">
						<th align="left" class="bg_tr" width="5%"><input
							type="checkbox" onclick="checkAll()" id="all"></th>
						<th align="left" width="20%">账户</th>
						<th align="left" width="20%">姓名</th>
						<th align="left" width="20%">手机</th>
						<th align="left">所属组织</th>
					</tr>
				</table>
				<table align="center">
					<tr>
						<td><input type="button" onclick="addTableUser()"
							width="25px" class="button_02" value="确定"></td>
					</tr>
				</table>
			</span>
			<table border="0" id="userselect">
				<tr>
					<td><select name="possible" id="obj1" size="4" MULTIPLE
						style="width: 150px; height: 310px;">

					</select></td>
					<td align="center"><input type="button" width="45px"
						onclick="func1()" class="button_02" value=">"> <input
						type="button" width="25px" onclick="func3()" class="button_02"
						value=">>"> <br>
					<br> <input type="button" class="button_02" width="45px"
						onclick="func2()" value="<"> <input type="button"
						width="25px" onclick="func4()" class="button_02" value="<<">
						<br />
					<br /> <input type="button" onclick="addUser()" width="25px"
						class="button_02" value="确定"></td>
					<td><select name="chosen" id="obj2" size="4" MULTIPLE
						style="width: 150px; height: 310px">

					</select></td>
				</tr>
			</table>
		</div>
</body>
</html>